/<template>
  <div class="menu">
    <div class="menu_header">
      <el-button type="primary" style="margin-bottom: 20px">新增</el-button>
    </div>
    <el-table
      align="center"
      :data="StoreMenu.menu_list"
      style="width: 100%"
      row-key="menuId"
      border
      :tree-props="{ children: 'children' }"
    >
      <el-table-column prop="name" label="名称" width="170" align="center" />
      <el-table-column prop="" label="图标" #default="scope" align="center">
        <el-icon v-if="scope.row.icon === 'admin'"><Avatar /></el-icon>
        <el-icon v-if="scope.row.icon === 'store'"><TakeawayBox /></el-icon>
        <el-icon v-if="scope.row.icon === 'order'"><Refrigerator /></el-icon>
        <el-icon v-if="scope.row.icon === 'system'"><Setting /></el-icon>
        <el-icon v-if="scope.row.icon === 'vip'"><GoldMedal /></el-icon>
      </el-table-column>
      <el-table-column label="类型" align="center" #default="scope">
        <el-tag v-if="scope.row.type === 0">目录</el-tag>
        <el-tag v-if="scope.row.type === 1" type="success">菜单</el-tag>
        <el-tag v-if="scope.row.type === 2" type="info">按钮</el-tag>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序号" align="center" />
      <el-table-column prop="url" label="菜单URL" width="150" align="center" />
      <el-table-column
        prop="perms"
        label="授权标识"
        width="150"
        align="center"
      />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleClick(scope)"
            >修改</el-button
          >
          <el-button link type="primary" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import "./menu.css";
import { menu } from "../../../../store/menu";
let StoreMenu: any = menu();
interface User {
  id: number;
  icon: string;
  name: string;
  hasChildren?: boolean;
  children?: User[];
}

let tableData: User[] = [];

const getList = () => {
  StoreMenu.menu_get_list();
};
getList();
const handleClick = (scope: any) => {
  console.log(scope);
};
</script>

<style>
</style>